<template>
  <div class="home">
     <div class="content-wrapper">
    <!-- header start-->
    <div class="header">
      <span class="title">重庆信驰科技有限公司</span>
      <div class="tab">
        <el-link
          :type="this.tab == 'home' ? 'primary' : ''"
          @click="gotoContent('home')"
          >首页</el-link
        >
        <el-link
          :type="this.tab == 'zhaopin' ? 'primary' : ''"
          @click="gotoContent('zhaopin')"
          >全职招聘</el-link
        >
        <el-link
          :type="this.tab == 'zulin' ? 'primary' : ''"
          @click="gotoContent('zulin')"
          >房屋租赁</el-link
        >
        <el-link
          :type="this.tab == 'fuwu' ? 'primary' : ''"
          @click="gotoContent('fuwu')"
          >生活服务</el-link
        >
        <el-link
          :type="this.tab == 'jiaoyi' ? 'primary' : ''"
          @click="gotoContent('jiaoyi')"
          >物品交易</el-link
        >
      </div>
      <div>
        <el-button type="primary" @click="openDialog('publish')"
          >发布消息</el-button
        >
        <span v-if="isLogin" class="ml20">{{ loginForm.account }}</span>
        <el-button v-if="!isLogin" type="info" @click="openDialog('register')"
          >注册</el-button
        >
        <el-button v-if="!isLogin" type="danger" @click="openDialog('login')"
          >登录</el-button
        >
      </div>
    </div>
    <!-- header end-->
    <!-- content start -->
    <div v-if="tab != 'home'" class="flex1">
      <xc-content
        v-if="!id"
        :data="data"
        @current-change="currentChange"
        :currentPage="currentPage"
        @show-detail="showDetail(arguments)"
      ></xc-content>
      <item-detail v-else :title="zhDes" :obj="detailObj"></item-detail>
    </div>

    <!-- content end -->
    <!-- index start -->
    <div class="index flex1" v-if="tab == 'home'">
      <img src="../static/img/banner.jpg" style="width: 100%" />
      <div v-for="(item, index) in globalData" :key="index + 'item'">
        <xc-content
          :data="item"
          :isShowPagination="false"
          @show-detail="showDetail(arguments)"
        ></xc-content>
      </div>
    </div>
    <!-- index end -->
    <!-- footer start -->
    <div class="footer">
      <el-link @click="gotoGov"
        >备案号：渝ICP备09054615号-1</el-link>
        <div>
            Powered By 重庆信驰科技有限公司 ©2021
        </div>
        <div>
            联系电话：023-81392018   地址：重庆市南岸区茶园通江大道201号7号楼8楼
        </div>
    </div>
    <!-- footer end -->
    </div>
    <!-- publish dialog start -->
    <el-dialog
      title="发布消息"
      :visible.sync="publishDialogVisible"
      :show-close="false"
      width="70%"
    >
      <el-form
        :model="publishForm"
        :rules="publishRules"
        ref="publishForm"
        label-width="100px"
      >
        <el-form-item label="发布类型" prop="type">
          <el-select
            v-model="publishForm.type"
            placeholder="请选择发布类型"
            @change="changeType"
          >
            <el-option label="全职招聘" value="zhaopin"></el-option>
            <el-option label="房屋租赁" value="zulin"></el-option>
            <el-option label="生活服务" value="fuwu"></el-option>
            <el-option label="物品交易" value="jiaoyi"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布标题" prop="title">
          <el-input
            v-model="publishForm.title"
            placeholder="请填写发布标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布人" prop="people" pla>
          <el-input
            v-model="publishForm.people"
            placeholder="请填写发布人"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布内容">
          <el-col>
            <el-form-item prop="content">
              <quill-editor ref="myQuillEditor" v-model="publishForm.content" />
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose('publish')">取 消</el-button>
        <el-button type="primary" @click="submitForm('publish')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- publish dialog start -->
    <!-- register start -->
    <el-dialog
      title="用户注册"
      :visible.sync="registerDialogVisible"
      :show-close="false"
      width="300px"
    >
      <el-form :model="registerForm" :rules="registerRules" ref="registerForm">
        <el-form-item label="" prop="account">
          <el-input
            v-model="registerForm.account"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            placeholder="请输入确认密码"
          ></el-input>
        </el-form-item>
         <el-form-item label="" prop="protocol">
        <el-checkbox-group v-model="registerForm.protocol">
            <div class="protocol">
                 <el-checkbox label="" name="protocol"></el-checkbox>
                 <el-link type="info" @click="showProtocol">点击阅读注册协议</el-link>
            </div>
        </el-checkbox-group>
      </el-form-item>
      </el-form>
     
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose('register')">取 消</el-button>
        <el-button type="primary" @click="submitForm('register')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- register end -->
    <!-- login start -->
    <el-dialog
      title="用户登陆"
      :visible.sync="loginDialogVisible"
      :show-close="false"
      width="300px"
    >
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
        <el-form-item label="" prop="account">
          <el-input
            v-model="loginForm.account"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose('login')">取 消</el-button>
        <el-button type="primary" @click="submitForm('login')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- login end -->
     <!-- protocol start -->
    <el-dialog
      title="注册协议"
      :visible.sync="protocolDialogVisible"
      :show-close="false"
      width="80%"
    >
    <div v-html="protocolHtml">
        
    </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose('protocol')">确 认</el-button>
      </span>
    </el-dialog>
    <!-- protocol end -->
  </div>
</template>

<script>
// @ is an alias to /src
import XcContent from "../components/XcContent";
import itemDetail from "../components/itemDetail";
import { deepClone, getNowTime } from "../utils/utils";
import { getData, publish, register, login } from "../api/api";
export default {
  name: "Home",
  components: {
    XcContent,
    itemDetail,
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    let validateEmail = (rule, value, callback) => {
      let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (value === "") {
        callback(new Error("请再次输入邮箱"));
      } else if (!regEmail.test(value)) {
        callback(new Error("请输入正确的邮箱格式"));
      } else {
        callback();
      }
    };
    return {
      id: "",
      tab: "home",
      data: [],
      zhDes: "全职招聘",
      currentPage: 1,
      globalData: {},
      detailObj: {},
      publishForm: {
        title: "",
        type: "",
        people: "",
        content: "",
      },
      protocolHtml:`一、定义<br>
平台，是指您当前所浏览的重庆信驰科技有限公司网站平台。<br>
用户，包含注册用户和非注册用户，以下亦称为“您”。注册用户是指通过我们平台完成全部注册程序后，使用我们平台服务或我们网站资料的用户。非注册用户是指未进行注册、直接登录我们平台或通过其他网站进入我们平台直接或间接地使用我们平台服务或我们网站资料的用户。<br>
协议方，本协议中协议双方合称“协议方”。本站及其相关服务可能存在的运营关联单位、我们平台在协议中统称为"我们"。<br>
二、协议的效力<br>
1、在您按照注册页面提示填写信息、阅读并同意本协议并完成全部注册程序后或以其他我们允许的方式实际使用我们平台服务时，您即受本协议的约束。<br>
2、本协议内容包括本协议正文《隐私政策》，所有我们已经发布的或将来可能发布的规则为本协议不可分割的组成部分，与本协议具有同等法律效力。除另行明确声明外，任何我们及其关联公司提供的服务（以下称为“我们平台服务”）均受本协议约束。您承诺接受并遵守本协议的约定。如果您不同意本协议的约定，您应立即停止注册程序或停止使用我们平台服务；如您继续访问和使用我们平台服务，即视为您已确知并完全同意本协议各项内容。<br>
3、我们有权根据国家法律法规的更新、产品和服务规则的调整需要不时地制订、修改本协议及/或各类规则，并提前以网站公示的方式进行公示。如您继续使用我们平台服务的，即表示您接受经修订的协议和规则。如发生有关争议时，以我们最新的相关协议和规则为准。<br>
三、注册<br>
1、您确认，在您完成注册程序或以其他我们允许的方式实际使用我们平台服务时，您应当是具备相应民事行为能力的自然人（十六周岁以上的未成年人，以自己的劳动收入为主要生活来源的，视为完全民事行为能力人）、法人或其他组织。若您不具备前述主体资格，则您及您的家长或法定监护人（以下统称"监护人"）应承担因此而导致的一切后果，且我们有权注销您的账户，并向您及您的监护人索偿。<br>
2、我们非常重视对青少年个人信息搜集和使用的安全性的保护。我们建议，任何未满18周岁的未成年人参加网上活动应事先取得其监护人可经查证的同意并遵守《全国青少年网络文明公约》。监护人应承担未成年人网络活动风险及保护未成年人相关网络隐私的首要责任。<br>
3、在您签署本协议，完成注册程序时。您应对您的用户名、登录密码的安全，以及对通过您的账户和密码实施的行为负责；因此所衍生的任何损失或损害，我们无法也不承担任何责任。除非有法律规定或行政司法机关的指令，且征得我们的同意，否则您的用户名、登录密码不得以任何方式转让、借用、赠与、继承（与账户相关的财产权益除外）<或>在第三方平台上进行展示或售卖。否则，由此给您（或我们、任何第三方）造成的一切损失，概由您自行承担（或者负责赔偿）。<br>
4、您在注册帐号或使用我们平台服务的过程中，应提供合法、真实、准确的个人资料，您填写的个人资料有变动的，应及时进行更新。如果因您提供的个人资料不合法、不真实、不准确的，您需承担因此引起的相应责任及后果，并且我们保留终止您使用我们各项服务的权利。<br>
5、您了解并同意，如您符合并且遵守本协议条款，在通过我们平台完成注册程序之后，即可成为我们平台注册用户。<br>
6、您不得通过任何手段恶意注册我们网站帐号，包括但不限于以牟利、炒作、套现等为目的多个账号注册。您亦不得盗用其他用户帐号。<br>
7、您了解并同意，一经注册用户账号，即视为您同意我们及/或其关联公司可以通过拨打电话、发送短信或者电子邮件等方式向您注册时填写的手机号码、电子邮箱等发送、告知相应的产品服务广告信息；您如果不同意接收相关信息，您可以通过相应的退订功能或相关提示进行退订。<br>
四、我们平台服务使用规范<br>
1、通过我们平台，您可以按照我们的规则发布各种生活信息。但所发布之信息不得含有如下内容：<br>
1) 反对宪法所确定的基本原则，煽动抗拒、破坏宪法和法律、行政法规实施的；<br>
2)煽动危害国家安全、泄露国家秘密、颠覆国家政权，推翻社会主义制度的；<br>
3)煽动分裂国家、破坏国家统一、损害国家荣誉和民族利益的；<br>
4)煽动民族仇恨、民族歧视，破坏民族团结的；<br>
5)捏造或者歪曲事实，散布谣言，扰乱社会秩序的；<br>
6)进行政治宣传或破坏国家宗教政策、宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖、教唆犯罪的；<br>
7)公然侮辱他人或者捏造事实诽谤他人的，或者进行其他恶意攻击的；<br>
8)损害国家机关信誉的；<br>
9)其他违反宪法和法律法规的；<br>
2、在接受我们服务的过程中，您不得从事下列行为：<br>
1)在使用我们平台服务过程中实施的所有行为均遵守国家法律、法规等规范文件及我们平台各项规则的规定和要求，不违背社会公共利益或公共道德，不损害他人的合法权益，不违反本协议及相关规则。您如果违反前述承诺，产生任何法律后果的，您应以自己的名义独立承担所有的法律责任，并确保我们免于因此产生任何损失或增加费用。<br>
2)不发布国家禁止发布的信息（除非取得合法且足够的许可），不发布涉嫌侵犯他人知识产权或其它合法权益的信息，不发布违背社会公共利益或公共道德、公序良俗的信息，不发布其它涉嫌违法或违反本协议及各类规则的信息。<br>
3)不对我们平台上的任何数据作商业性利用，包括但不限于在未经我们事先书面同意的情况下，以复制、传播等任何方式使用我们平台站上展示的资料。<br>
4)不使用任何装置、软件或例行程序干预或试图干预我们平台的正常运作或正在我们平台上进行的任何活动。您不得采取任何将导致不合理的庞大数据负载加诸我们平台网络设备的行动。<br>
3、您同意，在发现本网站任何内容不符合法律规定，或不符合本用户协议规定的，您有义务及时通知我们。如果您发现您的个人信息被盗用、您的版权或者其他权利被侵害，请将此情况告知我们并同时提供如下信息和材料：<br>
1)侵犯您权利的信息的网址，编号或其他可以找到该信息的细节；<br>
2)您是所述的版权或者其他权利的合法拥有者的权利证明；<br>
3)您的联系方式，包括联系人姓名，地址，电话号码和电子邮件；<br>
五、终止协议<br>
1、我们将在本平台公布并不时修订隐私权条款，隐私权条款构成本协议的有效组成部分。<br>
2、在您注销本平台账号时或后期不继续使用，我们将停止使用并删除您的信息。<br>
3、 会员在本平台删除账号或后期不继续使用，注销账号时会员可以通过拨打电话联系我们，核对信息确认此账号为本人操作使用后方以进行注销，我司承诺会在3个工作日内清除所有个人信息资料。`,
      registerForm: {
        account: "",
        email: "",
        password: "",
        confirmPassword: "",
        protocol: [],
      },
      registerRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        protocol: [
          {
            type: "array",
            required: true,
            message: "请同意协议",
            trigger: "change",
          },
        ],
        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
      },
      isLogin: false,
      loginForm: {
        account: "",
        password: "",
      },
      loginRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      publishRules: {
        title: [{ required: true, message: "请输入发布标题", trigger: "blur" }],
        people: [{ required: true, message: "请输入发布人", trigger: "blur" }],
        type: [
          { required: true, message: "请选择发布类型", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入发布内容", trigger: "blur" },
        ],
      },
      publishDialogVisible: false,
      registerDialogVisible: false,
      loginDialogVisible: false,
      protocolDialogVisible:false
    };
  },
  async created() {
    this.id = this.$route.query.id;
    if (this.$route.query.tab) {
      this.tab = this.$route.query.tab;
    }
    let result = await getData();
    let icpxcIsLogin = window.localStorage.getItem("icpxcIsLogin");
    if (icpxcIsLogin) {
      this.isLogin = true;
      this.loginForm.account = icpxcIsLogin;
    }
    let icpxcData = result.data.data;
    this.globalData = icpxcData;
    //var cloneGlobalData = deepClone(this.globalData);

    //this.data = cloneGlobalData[this.tab];
    //this.currentChange(this.currentPage);
    if (this.id) {
      let arr = this.globalData[this.tab].data.filter((item) => {
        return item.id == this.id;
      });
      this.detailObj = arr[0];
      this.zhDes = this.globalData[this.tab].title;
    }
  },
  methods: {
    showDetail(params) {
      let routeUrl = this.$router.resolve({
        path: "/",
        query: { id: params[0], tab: params[1] },
      });
      window.open(routeUrl.href, "_blank");
    },
    showProtocol(){
        this.protocolDialogVisible = true;
    },
    gotoGov() {
      window.open("https://beian.miit.gov.cn", "_blank");
    },
    changeTab() {
      let path = this.$route.fullPath;
      if (path != "/") {
        this.$router.replace({ path: "/" });
        this.id = "";
      }
    },

    gotoContent(val) {
      //   this.$router.push({path:"/", query: {id: "",tab:val}});
      //   location.reload();
      this.changeTab();
      this.tab = val;
      this.currentPage = 1;
      if (this.tab != "home") {
        var cloneGlobalData = deepClone(this.globalData);
        this.data = cloneGlobalData[this.tab];
        this.currentChange(this.currentPage, this.tab);
      }
    },

    currentChange(currentPage, tab) {
      if (!tab) tab = this.tab;
      this.currentPage = currentPage;
      let len = (currentPage - 1) * 10;
      let data = [];
      for (
        let i = len;
        i < this.globalData[tab].data.length && i < len + 10;
        i++
      ) {
        data.push(this.globalData[tab].data[i]);
      }
      this.data.data = data;
    },
    openDialog(name) {
      if (name == "publish" && !this.isLogin) {
        this.$alert("请先登录", "提示");
      } else {
        let n = name + "DialogVisible";
        this[n] = true;
      }
    },
    changeType(val) {
      this.publishForm.content = this.globalData[val].contentPlaceholder;
    },
    beforeClose(name) {
      let n = name + "DialogVisible";
      this[n] = false;
      if(name == "protocol" ) return;
      this.$refs[name + "Form"].resetFields();
    },

    submitForm(name) {
      this.$refs[name + "Form"].validate((valid) => {
        if (valid) {
          if (name == "publish") {
            this.addPublishData();
            this.beforeClose(name);
          } else if (name == "register") {
            this.register(name);
          } else if (name == "login") {
            this.login(name);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    login(name) {
      let loginForm = this.loginForm;
      login({ ...loginForm, url: window.location.href }).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "登陆成功",
            type: "success",
          });
          this.isLogin = true;
          window.localStorage.setItem("icpxcIsLogin", this.loginForm.account);
          let n = name + "DialogVisible";
          this[n] = false;
        } else {
          this.$message({
            message: "账号密码错误",
            type: "error",
          });
        }
      });
    },
    register(name) {
      let registerForm = this.registerForm;
      register({ ...registerForm, url: window.location.href }).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          this.beforeClose(name);
        } else {
          this.$message({
            message: "该用户已存在",
            type: "error",
          });
        }
      });
    },
    addPublishData() {
      let id = this.globalData[this.publishForm.type].data.length + 1;
      let time = getNowTime();
      let params = {
        ...this.publishForm,
        id: id,
        createTime: time,
      };
      this.globalData[this.publishForm.type].data.unshift(params);
      this.globalData[this.publishForm.type].totalPages = id;
      var cloneGlobalData = deepClone(this.globalData);
      this.data = cloneGlobalData[this.publishForm.type];
      this.changeTab();
      this.currentChange(1, this.publishForm.type);
      publish({ ...params, url: window.location.href });
      this.$message({
        message: "发布成功",
        type: "success",
      });
      this.gotoContent(this.publishForm.type);
    },
  },
};
</script>
<style lang="scss">
html,body,#app,.home,.content-wrapper {
    height: 100%;
}
.content-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.content-wrapper .header {
    flex-shrink:0;
}
.flex1 {
    flex: 1;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
  background-color: #f6f6f6;
  padding: 0 20px;
  .title {
    font-size: 24px;
    font-weight: bold;
  }
  .tab {
    a {
      margin-right: 20px;
      font-size: 16px;
    }
  }
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  flex-direction: column;
  width: 100%;
  padding-top:10px;
  padding-bottom: 10px;
  font-size: 14px;
  >div{
      margin-top: 5px;
  }
}
.content {
  padding: 50px 50px;
  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    background-color: #409eff;
    color: #f6f6f6;
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 50px;
    border-bottom: 1px dashed #ddd;
  }
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}
.el-select {
  display: block !important;
}
.ml20 {
  margin-left: 10px;
}
.primary {
  color: #409eff;
}

.index {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 50%;
    .content {
      padding: 20px 20px;
    }
  }
}
.protocol {
    >a {
        margin-left: 10px;
    }
    display: flex;
    align-items: center;
}
</style>
